<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--(1) 引入ElementUI的CSS -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>

</head>
<body>

<div id="container">

    <el-button>{{message}}</el-button>

    <el-tree
    :data="treeList"
    :props="defaultProps"
    @node-click="handleNodeClick"
    />
</div>

<script src="//unpkg.com/vue@next"></script>
<script src="//unpkg.com/element-plus"></script> <!-- (2)引入ElementUI的JS文件 -->

<script type="text/javascript">

    const demoApp = {
        data() {
            return {
                message: 'hello',
                treeList: [
                    {
                        label: "一级 1",
                        children: [
                            {
                                label: "二级 1-1",
                                children: [
                                    {
                                        label: "三级 1-1-1",
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        label: "一级 2",
                        children: [
                            {
                                label: "二级 2-1",
                                children: [
                                    {
                                        label: "三级 2-1-1",
                                    },
                                ],
                            },
                            {
                                label: "二级 2-2",
                                children: [
                                    {
                                        label: "三级 2-2-1",
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        label: "一级 3",
                        children: [
                            {
                                label: "二级 3-1",
                                children: [
                                    {
                                        label: "三级 3-1-1",
                                    },
                                ],
                            },
                            {
                                label: "二级 3-2",
                                children: [
                                    {
                                        label: "三级 3-2-1",
                                    },
                                ],
                            },
                        ],
                    },
                ],
                defaultProps: {  //这个数据的作用是什么？
                    children: 'children',
                    label: 'label'
                }
            }
        },
        mounted() {

        },
        methods: {
            handleNodeClick(data){
                console.log(data)
            }
        },
    }

    Vue.createApp(demoApp)
        .use(ElementPlus) // 使用ElementUI组件
        .mount('#container')
</script>

</body>
</html>
